import React from 'react';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import BizParams from '../../components/commons/BizParams'
import CurrencySelect from '../../components/commons/CurrencySelect'
import OperatorConstant from "../../utils/OperatorConstant";
import RecAccSelect from '../../components/commons/RecAccSelect'

const R = require('ramda');
import moment from 'moment'
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const Option = Select.Option;


export default Form.create({wrappedComponentRef: true})(class EditForex extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            type: "",
            options: [],
            value : "init",
        }
    }

    handleCancel = () => {
        this.props.form.resetFields(['recamount','payeeAmountunit','payman','payaccount','settlement',
        'recaccount','rectime','memo','noclaimamount','norelateamount','cstexchangerate'
        ]);
        this.setState({ options: [] , value: "init"});
        // this.props.form.setFieldsValue({recamount:""});
        // this.props.form.setFieldsValue({payeeAmountunit:""});
        // this.props.form.setFieldsValue({paymanselect:""});
        // this.props.form.setFieldsValue({payaccount:""});
        // this.props.form.setFieldsValue({settlement:""});
        // this.props.form.setFieldsValue({recaccount:""});
        // this.props.form.setFieldsValue({rectime:""});
        // this.props.form.setFieldsValue({memo:""});
        // this.props.form.setFieldsValue({noclaimamount:""});
        // this.props.form.setFieldsValue({norelateamount:""});
        // this.props.form.setFieldsValue({cstexchangerate:""});
    }


    handleConfirm = () => {
        if (this.props.type == OperatorConstant.view) {
            return;
        }

        this.props.form.validateFields((errors, values) => {
            if (errors) return;


            let type = "";
            let payload = {}

            type = "foreignExchangeManage/addForex";
            payload = {
                payaccount: values.payaccount,
                payman: values.payman,
                rectime: values.rectime.format(dateFormat),
                recamount: values.recamount,
                payeeAmountunit: values.payeeAmountunit,
                recaccount: values.recaccount,
                settlement: values.settlement,
                memo: values.memo,
                recaccountName: values.recaccountName,
                country: values.country,
                onSuccess:()=>{
                    this.props.handleSearch();
                }
            };

            this.props.dispatch({
                type: type,
                payload: payload
            })

            this.props.handleCancel();
        })
    }


    handleChange = (value) => {
        this.setState({ options: [] });
        this.setState({ value: value });

        let options = [];
        if(!R.isNil(this.props.paymen))
        {
            this.props.paymen.forEach((item)=>{
                if(item.payman.indexOf(value) != -1){
                    options.push(<Option value={item.payman}>{item.payman}</Option>)
                }

            });
            this.setState({ options: options });
        }
    
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {labelCol: { xs: {span: 8}, sm: {span: 8}}, wrapperCol: {xs: {span: 15}, sm: {span: 14}}};
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;

        let disable = (this.props.disabled || this.props.type == OperatorConstant.view || this.props.type == OperatorConstant.approval ||
            this.props.type == OperatorConstant.exchange );
        let options=[];


        if(!R.isNil(this.props.paymen)  && R.equals("init", this.state.value))
        {
            this.props.paymen.forEach((item)=>{
                options.push(<Option value={item.payman}>{item.payman}</Option>)
            })
        }

        let accountList = R.isNil(this.props.accountList) ? [] : this.props.accountList;

        return (
            <Form>

                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款人"
                            hasFeedback
                        >
                            {getFieldDecorator('payeeMan', {
                                rules: [{
                                    required: true, message: '请输入收款人',
                                }],
                                initialValue: dataSource.payeeMan
                            })(
                                <Input disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款账号"
                            hasFeedback
                        >
                            {getFieldDecorator('payeeAccount', {
                                rules: [{
                                    required: true, message: '请输入收款账号！',
                                }],
                                initialValue: dataSource.payeeAccount
                            })(
                                <Input disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="	收汇币种"
                            hasFeedback
                        >
                            {getFieldDecorator('payeeAmountunit', {
                                rules: [{
                                    required: true, message: '请输入收汇币种',
                                }],
                                initialValue: dataSource.payeeAmountunit
                            })(
                                <CurrencySelect disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款人国家"
                            hasFeedback
                        >
                            {getFieldDecorator('country', {
                                rules: [{
                                    required: true, message: '请选择收款人国家',
                                }],
                                initialValue: dataSource.country
                            })(
                                <BizParams sprCode={"country"} style={{width: '100%'}} blank={true}
                                           disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款银行"
                            hasFeedback
                        >
                            {getFieldDecorator('payeeBank', {
                                rules: [{
                                    required: true, message: '请输入收款银行',
                                }],
                                initialValue: dataSource.payeeBank
                            })(
                                <Input disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="收款银行地址"
                            hasFeedback
                        >
                            {getFieldDecorator('payeeAddress', {
                                rules: [{
                                    required: true, message: '请输入收款银行地址',
                                }],
                                initialValue: dataSource.payeeAddress
                            })(
                                <Input disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>


                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付款人"
                            hasFeedback
                        >
                            {getFieldDecorator('payMan', {
                                rules: [{
                                    required: true, message: '请输入付款人',
                                }],
                                initialValue: dataSource.payMan
                            })(
                                <Input disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付款账号"
                            hasFeedback
                        >
                            {getFieldDecorator('payAccount', {
                                rules: [{
                                    required: true, message: '请输入付款账号',
                                }],
                                initialValue: dataSource.payAccount
                            })(
                                <Input disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付款金额(CNY)"
                            hasFeedback
                        >
                            {getFieldDecorator('payAmount', {
                                rules: [{
                                    required: true, message: '请输入付款金额(CNY)',
                                }],
                                initialValue: dataSource.payAmount
                            })(
                                <Input disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付汇金额"
                            hasFeedback
                        >
                            {getFieldDecorator('fxAmount', {
                                rules: [{
                                    required: true, message: '请输入付汇金额',
                                }],
                                initialValue: dataSource.fxAmount ? dataSource.fxAmount : fxAmount
                            })(
                                <Input disabled={true}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="付汇方式"
                            hasFeedback
                        >
                            {getFieldDecorator('settlement', {
                                rules: [{
                                    required: true, message: '请输入付汇方式',
                                }],
                                initialValue: dataSource.settlement
                            })(
                                <BizParams sprCode='settlement' disabled={disable}/>
                            )}
                        </FormItem>
                    </Col>
                </Row>


                {this.props.type == OperatorConstant.view ?
                    <span>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="银行付汇汇率"
                                    hasFeedback
                                >
                                    {getFieldDecorator('fxRate', {
                                        initialValue: dataSource.fxRate
                                    })(
                                        <Input disabled={disable}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="待关联金额"
                                    hasFeedback
                                >
                                    {getFieldDecorator('norelateamount', {
                                        initialValue: dataSource.norelateamount
                                    })(
                                        <Input disabled={disable}/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </span>
                    :""

                }

            </Form>

        );
    }
})


